<!--房型详情 编辑-->
<template>
  <div v-loading="loading">

    <!--点击扩展按钮对应的弹出框-->
    <vol-box :model.sync="model" title="合同-审核" :width="700" :height="430">
      <div class="step-item" v-for="item in formFileds.nodeList">
        <div class="left-item" :class="{'step-current':item.isAud == 1}">
          <div :class="{'step-current':item.isAud == 1}">审批时间</div>
          <div class="left-date" :class="{'step-current':item.isAud == 1}">{{item.AuditTime}}</div>
        </div>
        <div class="right-item" :class="{'step-current':item.isAud == 1}">
          <div class="step-line" :class="{'step-current':item.isAud == 1}"></div>
          <i class="step-circle"></i>
          <div class="step-title" :class="{'step-current':item.isAud == 1}">{{item.name}}</div>

          <div class="step-text" :class="{'step-current':item.isAud == 1}">审批人：{{item.rolesName}}</div>
          <div class="step-text" :class="{'step-current':item.isAud == 1}"> 状 态： {{item.state == 0 ? '审核中' : item.state
            == 1 ? '审核通过' : item.state
            == 2 ? '驳回' : item.state == 3 ? '撤回'
            : ''}}</div>
          <div class="step-text" v-if="item.isAud == 1 && formFileds.status !== 3 "
            :class="{'step-current':item.isAud == 1}">备 注： {{item.remarks}}</div>
          <div v-if="item.isAud == 1 && formFileds.status !== 3 ">
            <label class="lert1" for="male">通过</label>
            <input class="intp" type="radio" id="male" value="1" v-model='item.state'>
            <label class="lert2" for="female">驳回</label>
            <input class="intp" type="radio" id="female" value="2" v-model='item.state'>
          </div>
          <div class="sbx" v-if="item.isAud == 1 && formFileds.status !== 3 ">
            <div>备注：</div>
            <textarea v-model="item.remarks"></textarea>
          </div>
          <div class="sbx" v-if="formFileds.status == 3 ">
            <div>已驳回不可操作</div>
          </div>
        </div>
      </div>

      <!-- <div class="sbox" v-for="item in formFileds.nodeList" :class="{'isActive':item.isAud == 1}">
        <p>合同ID：{{item.id}}</p>
        <p>节点名称:{{item.name}}</p>
        <p>审批状态：{{item.state == 0 ? '审核中' : item.state == 1 ? '审核通过' : item.state
          == 2 ? '驳回' : item.state == 3 ? '撤回'
          : ''}}</p>
        <p>审批时间：{{item.AuditTime}}</p>
        <div v-if="item.isAud == 1">
          <label class="lert1" for="male">通过</label>
          <input class="intp" type="radio" id="male" value="1" v-model='item.state'>
          <label class="lert2" for="female">驳回</label>
          <input class="intp" type="radio" id="female" value="2" v-model='item.state'>
        </div>
        <div v-if="item.isAud == 1">
          <textarea v-model="item.remarks"></textarea>
        </div>
      </div> -->
      <!-- <VolForm ref="myform" :loadKey="loadKey" :formFileds="formFileds" :formRules="formRules" :labelWidth="130">
      </VolForm> -->
      <!-- 添加slot槽覆盖footer的按钮，添加新的按钮 -->
      <div slot="footer">
        <Button type="error" @click="getFirstRow" icon="md-checkmark">提交</Button>
        <Button type="success" @click="resetForm" icon="md-refresh">重置</Button>
        <Button type="info" @click="close" icon="md-close">关闭</Button>
      </div>
    </vol-box>
  </div>
</template>
<script>
  import bus from "@/utilities/bus.js";
  import VolForm from "@/components/basic/VolForm.vue";
  export default {
    components: {
      VolBox: () => import("@/components/basic/VolBox.vue"),
      VolForm,
    },
    data() {
      return {
        loading: false,
        loadKey: true,
        model: false,
        formFileds: {
          createDate: "",
          createID: "",
          creator: "",
          id: "",
          modifier: "",
          modifierID: "",
          modifyDate: "",
          remark: "",
          status: "",
          workName: "",
          workTable: "",
          worktableName: "",
          contractId: "",
          stepNum: '',
          workType:"",
          checker:"",
          bindingId:"",
          lineList: [],
          nodeList: []
        },
        formRules: [
          [
          ],
        ],
      };
    },
    created() { },
    methods: {
      open(row) {
        this.model = true;
        console.log("行数据", row);
        // this.formFileds = { ...this.formFileds, ...row };
        this.formFileds.room_Name = row.room_Name;
        this.formFileds.room_Code = row.room_Code;
        this.formFileds.pms_Room_Code = row.pms_Room_Code;
        this.formFileds.real_Quantity = row.real_Quantity;
        this.formFileds.elementIdex = row.elementIdex; //索引
        this.formFileds.createDate = row.createDate
        this.formFileds.createID = row.createID
        this.formFileds.creator = row.creator
        this.formFileds.id = row.id
        this.formFileds.modifier = row.modifier
        this.formFileds.modifierID = row.modifierID
        this.formFileds.modifyDate = row.modifyDate
        this.formFileds.remark = row.remark
        this.formFileds.status = row.status
        this.formFileds.workName = row.workName
        this.formFileds.workTable = row.workTable
        this.formFileds.worktableName = row.worktableName
        this.formFileds.lineList = row.lineList
        this.formFileds.contractId = row.contractId
        this.formFileds.stepNum = row.stepNum
        this.formFileds.stepNum = row.stepNum
        this.formFileds.workType = row.workType
        this.formFileds.checker = row.checker
        this.formFileds.bindingId = row.bindingId

      
        var list1 = JSON.parse(row.nodeList)
        console.log(list1.length)
        var listlenght = list1.length
        if (listlenght >= 1 && list1[0].AuditTime == '待审批') {

          if (listlenght >= 1) {
            list1[0].isAud = 1

          } else if (listlenght >= 2) {
            list1[0].isAud = 1
            list1[1].isAud = 0

          } else if (listlenght >= 3) {
            list1[0].isAud = 1
            list1[1].isAud = 0
            list1[2].isAud = 0
          }
          console.log('第一步')

        } else if (listlenght >= 2 && list1[0].AuditTime !== '待审批' && list1[1].AuditTime == '待审批') {
          console.log('第二步')
          if (listlenght >= 2) {
            list1[0].isAud = 0
            list1[1].isAud = 1


          } else if (listlenght >= 3) {
            list1[0].isAud = 0
            list1[1].isAud = 1
            list1[2].isAud = 0
          }



        } else if (listlenght >= 3 && list1[0].AuditTime !== '待审批' && list1[1].AuditTime !== '待审批' && list1[2].AuditTime == '待审批') {
          console.log('第三步')
          list1[0].isAud = 0
          list1[1].isAud = 0
          list1[2].isAud = 1
        }
        this.formFileds.nodeList = list1; //json串
        console.log("行数据2", this.formFileds);
      },
      // 保存按钮
      getFirstRow() {
        let that = this;
        let listA = that.formFileds.nodeList
        let timer = new Date()
        for (var i = 0; i <= listA.length; i++) {
          console.log(listA[i].isAud)
          if (listA[i].isAud == 1) {
            listA[i].isAud = 0
            listA[i].AuditTime = timer.toLocaleString()
            // '2023-3-28'
            break;
          }

        }
        //that.formFileds.nodeList = JSON.stringify(listA)
        console.log("shuju", that.formFileds);
        that.$parent.jsEvents(this.formFileds);
        // that.$parent.jsEvent(this.formFileds);
        // this.$refs.myform.validate(() => {
        //   //   // this.loading = true;
        //   console.log("shuju", this.formFileds);
        //   that.$parent.jsEvents(this.formFileds);
        // });
      },
      close() {
        this.model = false;
        //  let that= this.$store.getters.data().viewPageTest;
        //  that.$refs.table.load();
      },
      // 重置表单
      resetForm() {
        this.$refs.myform.reset();
      },
    },
  };
</script>
<style scoped>
  .lert1 {

    position: relative;
    top: -2px;
  }

  .lert2 {

    position: relative;
    top: -2px;
  }

  .intp {
    margin-top: 10px;
  }


  .step-item {
    background: #fff;
    display: flex;
  }

  .sbx {
    display: flex;
  }

  .left-item {
    min-width: 180px;
    text-align: right;
    padding-right: 25px;
    padding-top: 8px;
    padding-bottom: 10px;
    /* margin-left: 100px; */
  }

  .left-item .left-date {
    font-size: 13px;
    padding-top: 7px;
    color: #6c6c6c;
  }

  .right-item {
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid #f3f3f3;
    padding: 5px 0 5px 5px;
    border-bottom: 0;
  }

  .right-item:before {
    content: "";
  }

  .step-line {
    top: 16px;
    left: -10px;
    width: 1px;
    height: 100%;
    position: absolute;
    background-color: #ebedf0;
  }

  .step-circle {
    position: absolute;
    top: 17px;
    left: -9px;
    z-index: 2;
    font-size: 12px;
    line-height: 1;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: #a1a1a1;
    border-radius: 50%;
  }

  .step-title {
    font-weight: 700;
    padding-top: 3px;
  }

  .step-text {
    font-size: 13px;
    color: #999;
    padding-top: 6px;
  }

  .step-current {
    font-size: 13px;
    padding-top: 6px;
    color: #2f95ff !important;
  }


  .step-current .step-circle {
    background: #2f95ff !important;
  }

  textarea {
    outline-color: #2f95ff;
    border-color: #2f95ff;
    color: #2f95ff;
    padding: 2px;
  }

  .srcoll-content {
    display: flex;
  }
</style>